import React, {Component} from 'react';
import {Form, Row, Table, Col, Pagination} from 'antd';

import {InputStorages} from '../components/EditComponent';
import "../css/roleAssignment.css";
import {storage} from "../value";
import app from '../AppMethod';
import moment from 'moment';
import {config} from "../config";

class storageManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 0,
                total: 0,
                pagination: 0
            },
            allPage: 0,
            data: [],
        }
    };

    columns = [
        {
            title: '厂家',
            dataIndex: 'storage_factory',
            align: 'center',
            width: '20%'
        },
        {
            title: '订单号',
            dataIndex: 'storage_num',
            align: 'center'
        },
        {
            title: '预计来货日期',
            dataIndex: 'storage_time',
            className: 'tableItem',
            align: 'center'
        },
        {
            title: '预计金额',
            dataIndex: 'storage_money',
            align: 'center'
        },
        {
            title: '预计件数',
            dataIndex: 'storage_package',
            align: 'center'
        },
        {
            title: '预计散包数',
            dataIndex: 'storage_single',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            dataIndex: this.columns,
            render: data => {
                return (
                    <InputStorages handleStorageDetail={(role) => this.handleStorageDetail(role, data.storage_id)}/>
                )
            }
        }
    ];

    render() {
        return (
            <div>
                <div style={{background: '#fff'}}>
                    <div className="orderDetailTitle">待入库</div>
                </div>
                <div style={{background: '#fff', minHeight: 280,paddingTop:60}}>
                    <Row>
                        <Table
                            columns={this.columns}
                            rowKey={record => record.storage_id}
                            //rowKey={(record,index)=> index}
                            loading={this.state.loading}
                            dataSource={this.state.data}
                            pagination={false}
                            size={'middle'}
                        >
                        </Table>
                    </Row>
                    <Row style={{marginTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
                        <Col span={12} style={{fontSize: '15px'}}>
                            共 {this.state.pagination.total} 条记录 第 {this.state.pagination.current} / {this.state.allPage}
                            页
                        </Col>
                        <Col span={12} style={{textAlign: 'right'}}>
                            <Pagination {...this.state.pagination} showSizeChanger={true} showQuickJumper={true}
                                        onChange={(page, pageSize) => this.handlePageChange(page, pageSize)}
                                        onShowSizeChange={(current, size) => this.handleSizeChange(current, size)}
                                        hideOnSinglePage={true}/>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    };

    componentDidMount() {
        this.handleGetStorageList();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 获取入库单列表
     * @param data
     */
    handleGetStorageList(data = {page: 1, size: 10}) {
        this.setState({loading: true});
        app.post(storage.SEARCH_STORAGEINLIST, data).then((result) => {
            if (result.code === 1) {
                let count = result.data.count;
                let pagination = {
                    current: data.page,
                    pageSize: data.size,
                    total: count
                };
                let allPage;
                if (count % data.size > 0) {
                    allPage = parseInt(count / data.size) + 1;
                } else {
                    allPage = count / data.size;
                }
                let orderData = result.data.dataSet;
                for (let i = 0; i < orderData.length; i++) {
                    orderData[i].storage_time = orderData[i].storage_time === null ? '' : moment(orderData[i].storage_time).format('YYYY-MM-DD');
                }
                this.setState({allPage, pagination, data: orderData, loading: false});
            } else {
                let pagination = {
                    current: 0,
                    pageSize: 0,
                    total: 0
                };
                let allPage = 0;
                this.setState({allPage, pagination, data: [], loading: false});
            }
        })
    };

    /**
     * 处理跳转入库详情页面
     * @param role
     * @param id
     */
    handleStorageDetail(role, id) {
        app.setData("role", role);
        this.props.history.push(config.path + `/storageDetail/${id}`);
    }
};

const storageManages = Form.create()(storageManage);
export default storageManages;